<template>
    <div style="">
        <div class="tab-content">
            <h2>{{ type && list[type]['tit'] }}</h2>
        <el-form label-width="70px" >
            <el-form-item  v-if="type == 'images'||type == 'product' " label="布局" label-width="60px">
                <div class="tab">
                    <span v-for="(val, key, index) in tabType" :key="index" @click="tab(key)" :class="{active: val}">
                        <i class="el-icon-s-data"></i> {{ key }}
                    </span>
                </div>
            </el-form-item>
                <el-form-item v-if="style.height" label="高" label-width="60px">
                <div style="display: flex;">
                    <div>
                        <div style="margin-bottom: 6px;">
                            <el-input type="number" min='0' v-model="style.height" size="small" style="width: 60px;"></el-input>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item v-if="style.padding" label="内边距" label-width="60px">
                <div>
                    <div class="flex">
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">上:</span>
                            <el-input type="number" min='0' v-model="style.padding[0]" size="small" style="width: 60px;"></el-input>
                        </div>
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">下:</span>
                            <el-input type="number" min='0' v-model="style.padding[2]" size="small" style="width: 60px;"></el-input>
                        </div>
                    </div>
                    <div class="flex">
                        <div>
                            <span style="padding:0 10px;">左:</span>
                            <el-input type="number" min='0' v-model="style.padding[3]" size="small" style="width: 60px;"></el-input>
                        </div>
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">右:</span>
                            <el-input type="number" min='0' v-model="style.padding[1]" size="small" style="width: 60px;"></el-input>
                        </div>

                    </div>
                </div>
            </el-form-item>
            <el-form-item v-if="style.margin" label="外边距" label-width="60px">
                <div>
                    <div class="flex">
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">上:</span>
                            <el-input type="number" min='0' v-model="style.margin[0]" size="small" style="width: 60px;"></el-input>
                        </div>
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">下:</span>
                            <el-input type="number" min='0' v-model="style.margin[2]" size="small" style="width: 60px;"></el-input>
                        </div>
                    </div>
                    <div class="flex">
                        <div >
                            <span style="padding:0 10px;">左:</span>
                            <el-input type="number" min='0' v-model="style.margin[3]" size="small" style="width: 60px;"></el-input>
                        </div>
                        <div style="margin-bottom: 6px;">
                            <span style="padding:0 10px;">右:</span>
                            <el-input type="number" min='0' v-model="style.margin[1]" size="small" style="width: 60px;"></el-input>
                        </div>

                    </div>
                </div>
            </el-form-item>
            <el-form-item v-if="style.backgroundColor" label="背景颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="style.backgroundColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{style.backgroundColor ='rgba(0,0,0,0)'}">重置</el-button>
                    
                </div>
            </el-form-item>
            <el-form-item v-if= "style.radius !== undefined" label="圆角">
                <div style="display: flex;">
                    <div>
                        <div style="margin-bottom: 6px;">
                            <el-input type="number" min='0' v-model="style.radius" size="small" style="width: 60px;"></el-input>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <!-- <el-form-item label="样式">
                <div style="display: flex;align-items: center;margin-top: 6px;">
                    <el-radio-group v-model="radiu" size="small">
                        <el-radio-button label="One">直角</el-radio-button>
                        <el-radio-button label="Two">圆角</el-radio-button>
                    </el-radio-group>
                </div>
            </el-form-item> -->
        </el-form>
          
        </div>


        <!-- <H4 style="margin-bottom: 20px;"></H4> -->
       
        <component :is="type && list[type]['com']" :data="data" @changeTab="tab"></component>
    </div>
</template>

<script>
    import Info from "../Edit/Info.vue"
    import Images from "../Edit/Image"
    import Product from "../Edit/Product"
    import Search from "../Edit/Search"
    import Notice from "../Edit/Notice"
    import Shop from "../Edit/Shop"
    // Shop
    export default {
        name: 'EditForm',
        components: {
            Info,
            Images,
            Product,
            Search,
            Notice,
            Shop
        },
        props: {
            data: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                type: '',
                list: {
                    'info': {
                        tit: '页面信息',
                        com: 'Info'
                    },
                    'images': {
                        tit: '图片',
                        com: 'Images'
                    },
                    'banner': {
                        tit: '轮播图',
                        com: 'Images'
                    },
                    'product': {
                        tit: '商品',
                        com: 'Product'
                    },
                    'Search': {
                        name: '搜索框',
                        com: 'Search'
                    },
                    'Shop': {
                        name: '店铺信息',
                        com: 'Shop'
                    },
                    'Notice': {
                        name: '公告',
                        com: 'Notice'
                    },
                },
                tabType: {
                    1: true,
                    2: false,
                    3: false
                },
                style:{},
    

            }
        },
        mounted() {
            this.type = this.data.type
            // console.log(this.data.type,'this.data');
            if (this.data.tabType) {
                this.tab(this.data.tabType)
            }
            if(this.data.style){
                this.style=this.data.style
            }

        
            
        },
        methods: {
            tab(key) {
                for (let i in this.tabType) {
                    if (key == i) {
                        this.tabType[key] = true
                        this.$set(this.data, 'tabType', key)
                    } else {
                        this.tabType[i] = false
                    }
                }
            },
        }
    }
</script>

<style scoped lang="less">
   @import "edit.less";
    section {
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .tab-content {
        padding: 0 15px;

        h2 {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
        }

        .tab {
            display: flex;
            justify-content: space-around;
            border: 1px solid #ddd;
            border-radius: 6px;

            span {
                width: 33.33%;
                text-align: center;
                font-size: 14px;
                color: #666;
                display: block;
                height: 36px;
                line-height: 36px;
                cursor: pointer;

                &.active {
                    color: #fff;
                    background: #409eff;
                    border-radius: 2px;
                }

                &:nth-of-type(2) {
                    border-left: 1px solid #ddd;
                    border-right: 1px solid #ddd;
                }
            }
        }
    }
</style>